<template>
	<div class="view">
		<template>
			<Top :title="'创建账号'"></Top>
		</template>
		<div class="main">
			<div class="main_con">
				<div class="main_title">创建账号</div>
				<div class="main_view">
					<el-form label-position="top" :model="form" ref="form" :rules="rules">
						<el-form-item label="账号" class="is-required" prop="adminname">
							<el-input placeholder="请输入账号" class="input" v-model="form.adminname"></el-input>
						</el-form-item>
						<el-form-item label="密码" class="is-required" prop="pwd">
							<div>
								<el-input placeholder="请输入密码" class="input" v-model="form.pwd" type="password">
								</el-input>
							</div>
							<div class="rank_view">
								<div class="rank rank1" :class="{'active':rank>=1}">弱</div>
								<div class="rank rank2" :class="{'active':rank>=2}">中</div>
								<div class="rank rank3" :class="{'active':rank>=3}">强</div>
							</div>
						</el-form-item>
						<el-form-item label="账号有效期" prop="riqiExpire">
							<el-date-picker type="datetime" align="center"  placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"
								v-model="form.riqiExpire" class="input" >
							</el-date-picker>
						</el-form-item>
						<el-form-item label="真实姓名">
							<el-input placeholder="请输入真实姓名" class="input" v-model="form.name"></el-input>
						</el-form-item>
						<el-form-item label="个人邮箱">
							<el-input placeholder="请输入个人邮箱" class="input" v-model="form.email"></el-input>
						</el-form-item>
						<el-form-item label="QQ">
							<el-input placeholder="请输入QQ" class="input" v-model="form.qq"></el-input>
						</el-form-item>
						<el-form-item label="联系方式">
							<el-input placeholder="请输入联系方式" class="input" v-model="form.tel"></el-input>
						</el-form-item>
						<el-form-item label="绑定IP" prop="ip" :class="{'is-required':isIp}">
							<el-checkbox @change="checkChange" v-model="form.isIp"></el-checkbox>
							<el-input placeholder="请输入绑定IP" class="input" v-model="form.ip" style="margin-left: 10px;">
							</el-input>
						</el-form-item>
					</el-form>

				</div>
				<div class="saveBtn">
					<el-button type="primary" size="medium" @click="command" :disabled="isAdd">保存并发布</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Top from "../../../components/top.vue"
	export default {
		components: {
			Top
		},
		data() {
			var pwdRule = (rule, value, callback) => {
				if (value.length < 6) {
					return callback(new Error('密码不能小于6位数'));
				} else {
					callback();
				}
			}
			
			var ipRule = (rule, value, callback) => {
				if(this.isIp){
					if(value==""){
						return callback(new Error('请输入ip'));
					}else{
						callback();
					}
				}else{
					callback();
				}
			}

			return {
				form: {
					adminname: "", // 账号
					pwd: "", // 密码
					gname: "", //组名
					name: "", //真实姓名
					tel: "", //联系电话
					email: "", // 个人邮箱
					qq: "", // qq号
					wechat: "", // 微信号
					sfz: "", // 身份证号
					riqiExpire: "", // 日期有效期
					loginIp: "", //绑定ip地址
				},
				isIp: false,
				rules: {
					adminname: [{
						required: true,
						message: '请输入账号',
						trigger: 'change'
					}],
					pwd: [{
							required: true,
							message: '请输入密码',
							trigger: 'change'
						},
						{
							validator: pwdRule,
							trigger: 'change'
						}
					],
					riqiExpire: [{
						required: true,
						message: '请选择组名',
						trigger: 'change'
					}],
					ip: [{
						validator: ipRule,
						trigger: 'blur'
					}],
				},

				roleList: [],
				isAdd: false,
			}
		},
		computed: {
			rank() {
				var lvel = 0;
				if (/[0-9]/.test(this.form.pwd) && this.form.pwd.length >= 6) {
					lvel++;
				}
				if (/[a-zA-Z_]/.test(this.form.pwd) && this.form.pwd.length >= 6) {
					lvel++;
				}
				if (/[^0-9a-zA-Z_]/.test(this.form.pwd) && this.form.pwd.length >= 6) {
					lvel++;
				}

				return lvel
			}
		},
		methods: {
			// 保存表单验证
			command() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						this.isAdd = true
						this.save()
					}
				});
			},

			// 保存
			save() {
				let list = this.form
				if (this.isIp) {
					list.isIp = 1
				}else{
					list.isIp = 0
				}
				this.$http({
					'method':'post',
					'url':this.$api.adminAdd,
					data:list
				}).then(res =>{
					if(res.data.code==20000){
						this.$message.success(res.data.message)
						this.$refs.form.resetFields()
						this.$router.push('/user')
					}else{
						this.$message.error(res.data.message)
					}
					this.isAdd = false
				})
			},

			// 是否绑定ip
			checkChange(e) {
				if (e) {

				} else {
					this.form.ip = ""
					this.$refs.form.clearValidate('ip')
				}
			},

		},
		created() {
		}
	}
</script>

<style scoped>
	@import url("../../../assets/css/userAdd.css");
</style>
